import { Anchor, AnchorProps, Col, Menu, MenuProps, Row } from 'antd'
import { useRouter } from 'next/router'
import React, { PropsWithChildren } from 'react'

export default function Docx({ children }: PropsWithChildren) {
  const router = useRouter()
  const items: MenuProps['items'] = [
    {
      key: 'part-1',
      label: 'Part 1',
    },
    {
      key: 'part-2',
      label: 'Part 2',
    },
    {
      key: 'part-3',
      label: 'Part 3',
    },
  ]
  const AnchorItems: AnchorProps['items'] = [
    {
      key: 'part-1',
      href: '#part-1',
      title: 'Part 1',
    },
    {
      key: 'part-2',
      href: '#part-2',
      title: 'Part 2',
    },
    {
      key: 'part-3',
      href: '#part-3',
      title: 'Part 3',
    },
  ]
  const contenetlist = [
    {
      title: '文章以',
      path: '111',
      desc: '是的法师打发打发',
      time: '2024',
    },
    {
      title: '文章以',
      path: '211',
      desc: '是的法师打发打发',
      time: '2024',
    },
  ]
  for (let index = 0; index < 20; index++) {
    contenetlist.push({
      title: '文章以',
      path: index + '',
      desc: '是的法师打发打发',
      time: '2024',
    })
  }
  return (
    <div className="overflow-y-auto overflow-x-hidden relative">
      <Row gutter={20}>
        <Col span={5}>
          <div className="overflow-y-auto">
            <Menu items={items}></Menu>
          </div>
        </Col>
        <Col span={15}>
          {contenetlist.map((item) => (
            <>
              <div
                key={item.path}
                className="pt-10"
                onClick={() => {
                  router.push(item.path)
                }}
              >
                <div className="font-semibold text-xl">{item.title}</div>
                <div className="text-font-color">{item.desc}</div>
                <div className="text-sm text-gray-300">{item.time}</div>
              </div>
            </>
          ))}
        </Col>
        <Col span={4}>
          <div className="overflow-y-auto w-full fixed top-[120px]">
            <Anchor items={AnchorItems}></Anchor>
          </div>
        </Col>
      </Row>
    </div>
  )
}
